<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
  <ui:composition>
    <div class="container" style="width: 100%;">
      <h:form id="create-post" styleClass="create-post">
        <h:messages id="messages" showDetail="true" autoUpdate="true"/>

        <h:outputLabel for="title" value="Title:"/>
        <h:inputText id="title" value="#{bean.post.title}" required="true"/>
        <br />

        <h:outputLabel for="content" value="Content:"/>
        <h:inputTextarea rows="10" id="content" value="#{bean.post.content}" required="true"/>
        <br />

        <h:outputLabel for="status" value="Status:"/>
        <h:selectOneListbox id="status" value="#{bean.post.status}" size="1">
          <f:selectItems value="#{bean.availableStatus}" var="s" itemValue="#{s}" itemLabel="#{s}" />
        </h:selectOneListbox>
        <br />

        <h:outputLabel for="format" value="Format:"/>
        <h:selectOneListbox id="format" value="#{bean.post.format}" size="1">
          <f:selectItems value="#{bean.availableFormats}" var="f" itemValue="#{f}" itemLabel="#{f}" />
        </h:selectOneListbox>
        <br />

        <h:outputLabel for="tag" value="Tags:"/>
        <div class="input-append">
          <h:inputText id="tag" value="#{bean.newTag}" styleClass="span11" />
          <h:commandButton styleClass="btn" value="Add tag" actionListener="#{bean.addTag(bean.newTag)}">
            <f:ajax execute="tag" render="tag tag-list" />
          </h:commandButton>
        </div>
        <h:panelGroup layout="block" id="tag-list">
          <ui:repeat value="#{bean.post.tags}" var="it">
            <h:commandButton styleClass="btn btn-mini" value="#{it}" actionListener="#{bean.post.removeTag(it)}">
              <f:ajax render=":create-post:tag-list"  />
            </h:commandButton>
          </ui:repeat>
        </h:panelGroup>
        <br />

        <h:commandButton styleClass="btn btn-large btn-primary" style="width: 100%;" value="Blog it!" action="#{bean.save}"/>
      </h:form>
    </div>
  </ui:composition>
</h:body>
</html>
